<template>
    <div class="lunbo-box">
        <div class="lunbo">
            <div class="lunbo-bg">
                <div class="uls">
                    <!-- <img v-for="(item,index) in imgs" :key="index+'0'" :src="item.src" alt="" class="img"> -->
                    <img :src="imgs[currentIndex].src" alt="">
                </div>
            </div>
            <el-carousel indicator-position="outside" height="710px" @change="changeImg">
                <el-carousel-item v-for="item in 6" :key="item">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                imgs: [
                    {src: require('../../assets/lunbo1.jpg')},
                    {src: require('../../assets/lunbo2.jpg')},
                    {src: require('../../assets/lunbo3.jpg')},
                    {src: require('../../assets/lunbo4.jpg')},
                    {src: require('../../assets/lunbo5.jpg')},
                    {src: require('../../assets/lunbo6.jpg')}
                ],
                currentIndex: 0
            }
        },
        methods: {
            changeImg(index){
                this.currentIndex = index
            }
        }
    }
</script>
<style> 
    .lunbo-box {
        margin-bottom: 150px;
    }
    .lunbo-box .el-carousel--horizontal {
        height: 800px;
        overflow: hidden;
    }
    /* 箭头 */
    .lunbo-box .el-carousel__container .el-carousel__arrow {
        width: 50px;
        height: 70px;
        border-radius: 4px;
        font-size: 20px;
    }
    .lunbo-box .el-carousel__container .el-carousel__arrow--left {
        left: 17%;
        top: 60%;
        background: rgba(31,45,61,.41);
    }
    .lunbo-box .el-carousel__container .el-carousel__arrow--right {
        right: 17%;
        top: 60%;
        background: rgba(31,45,61,.41);
    }
    .lunbo {
        height: 600px;
        position: relative;
    }
    .lunbo-bg {
        width: 1680px;
        height: 100%;
        margin: 0 auto;
        z-index: -1;
        border: 1px solid #000;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .lunbo .lunbo-bg .uls {
        width: 1680px;
        height: 100%;
        position: relative;
        background: rgb(250, 246, 247);
        overflow: hidden;
        filter: blur(10px);
    }
    .uls img {
        width: 100%;
    }
    .lunbo-bg div .img {
        float: left;
        width: 1680px;
        height: 100%;
        /* background-image: url('../../assets/lunbo1.jpg'); */
        background-size: 100%;
        /* position: absolute;
        top: 0px;
        left: 0; */
        filter: blur(4px);
        overflow: hidden;
    }
    .lunbo-box .el-carousel__container {
        width: 1680px;
        max-width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .lunbo-box .el-carousel__container .el-carousel__item {
        width: 1152px;
        height: 600px;
        position: absolute;
        top: 14%;
        /* left: 50%; */
        left: calc(50% - 576px); 
        /* transform: translateX(-50%); */
        /* overflow: hidden;*/
    }
    .lunbo-box .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }
    .lunbo-box .el-carousel__item:nth-of-type(1) {
        background-image: url('../../assets/lunbo1.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .lunbo-box .el-carousel__item:nth-of-type(2) {
        background-image: url('../../assets/lunbo2.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .lunbo-box .el-carousel__item:nth-of-type(3) {
        background-image: url('../../assets/lunbo3.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .lunbo-box .el-carousel__item:nth-of-type(4) {
        background-image: url('../../assets/lunbo4.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .lunbo-box .el-carousel__item:nth-of-type(5) {
        background-image: url('../../assets/lunbo5.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .lunbo-box .el-carousel__item:nth-of-type(6) {
        background-image: url('../../assets/lunbo6.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
</style>